<template>
  <div class="container">
    <div class="login_form">
      <div class="username">
        <svg
          class="icon"
          width="64px"
          height="64.00px"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        ><path fill="rgba(255, 255, 255, 0.7)" d="M512 564.471172c-118.430897 0-214.686897-97.350621-214.686897-217.052689 0-119.666759 96.29131-217.017379 214.686897-217.01738 118.360276 0 214.686897 97.350621 214.686897 217.01738 0 119.702069-96.326621 217.05269-214.686897 217.052689z m0-393.745655c-96.150069 0-174.362483 79.271724-174.362483 176.692966 0 97.456552 78.212414 176.692966 174.362483 176.692965s174.362483-79.271724 174.362483-176.692965c0-97.421241-78.212414-176.692966-174.362483-176.692966z" /><path fill="rgba(255, 255, 255, 0.7)" d="M837.172966 893.598897a20.162207 20.162207 0 0 1-20.126897-20.162207 310.23669 310.23669 0 0 0-110.768552-238.274207 20.197517 20.197517 0 0 1 25.953104-30.896552 350.137379 350.137379 0 0 1 125.104551 269.170759 20.232828 20.232828 0 0 1-20.162206 20.162207z m-650.345932 0a20.162207 20.162207 0 0 1-20.126896-20.162207c0-192.617931 154.906483-349.325241 345.299862-349.325242a20.162207 20.162207 0 0 1 0 40.359724c-168.218483 0-305.046069 138.593103-305.046069 308.965518a20.162207 20.162207 0 0 1-20.126897 20.162207z" /></svg>
        <Field v-model="username" />
      </div>
      <div class="password">
        <svg
          class="icon"
          width="64px"
          height="64.00px"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        ><path fill="rgba(255, 255, 255, 0.7)" d="M512 752.64c-15.36 0-25.6-10.24-25.6-25.6v-117.76c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v117.76c0 15.36-10.24 25.6-25.6 25.6zM691.2 394.24c-15.36 0-25.6-10.24-25.6-25.6V256c0-87.04-66.56-153.6-153.6-153.6S358.4 168.96 358.4 256v112.64c0 15.36-10.24 25.6-25.6 25.6S307.2 384 307.2 368.64V256c0-112.64 92.16-204.8 204.8-204.8s204.8 92.16 204.8 204.8v112.64c0 15.36-10.24 25.6-25.6 25.6z" /><path fill="rgba(255, 255, 255, 0.7)" d="M727.04 972.8H296.96c-97.28 0-179.2-81.92-179.2-179.2v-235.52c0-97.28 81.92-179.2 179.2-179.2h424.96c97.28 0 179.2 81.92 179.2 179.2v235.52c5.12 97.28-76.8 179.2-174.08 179.2zM296.96 430.08c-71.68 0-128 56.32-128 128v235.52c0 71.68 56.32 128 128 128h424.96c71.68 0 128-56.32 128-128v-235.52c0-71.68-56.32-128-128-128H296.96z" /></svg>
        <Field v-model="password" />
      </div>
      <div class="register">
        <nuxt-link to="/register">
          注册
        </nuxt-link>
      </div>
    </div>
    <div class="footer_login">
      登录
    </div>
  </div>
</template>

<script>
import { Field } from 'vant'
export default {
  components: {
    Field
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
  },
  methods: {
    goRegister () {
      this.$router.push('/register')
    }
  },
  head () {
    return {
      title: '登录'
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../assets/css/index.scss");
.container {
  margin: 0 auto;
  padding: 0px;
  min-height: 568px;
  height: 100vh;
  text-align: center;
  background: url('../static/images/loginbg.jpg') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
     /deep/ input {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.7);
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
    }
    .van-cell {
        background-color: transparent;
    }
  .login_form {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      padding-left: 24px;
      margin-top: 44%;
      text-align: left;
      >div {
          display: flex;
          align-items: center;
          margin-bottom: 30px;
        svg {
          width: 38px;
          height: 38px;
        }
        >div {
            flex: 1;
            box-sizing: border-box;
            padding-left: 20px;
        }
      }
      .password {
          margin-bottom: 0px;
      }
      .register {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding-right: 16px;
          justify-content: flex-end;
          color: rgba(255, 255, 255, 0.8);
          a {
             color: rgba(255, 255, 255, 0.8);
          }
      }
  }
  .footer_login {
      width: 90%;
      margin: 0 auto;
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      border-radius: 14px;
      background-color: rgba(183, 181, 181,0.28);
      padding: 13px 0px;
      left: 5%;
      bottom: 40px;
      text-align: center;
  }
}
</style>
